<template>
  <div class="page lobby">
    <div class="ruok-header">
      <div class="header-title">购彩中心</div>
    </div>
    <van-tabs v-model="active" line-width="135px" class="tab">
      <van-tab title="传统彩">
        <PlayItem v-for="(item, index) in playItem" :key="index"
          :logo=item.logo :name=item.name :type="item.type" :nums=item.nums :nper=item.nper></PlayItem>
      </van-tab>
      <van-tab title="低频彩">低频彩</van-tab>
      <van-tab title="全部">全部</van-tab>
    </van-tabs>


    <tabbar />
  </div>
</template>

<script>
import Tabbar from "components/Tabbar";
import PlayItem from "components/PlayItem"
import { Tab, Tabs } from "vant";
import Vue from "vue";
Vue.use(Tab).use(Tabs);
export default {
  name: "buyHall",
  components: {
    Tabbar,
    PlayItem
  },
  data() {
    return {
      active: 0,
      playItem: [
        {
          logo: require('../../assets/images/tickets/js1fk3.png'),
          name: '一分快3',
          type: '1',
          nums: ['1', '3', '5'],
          nper: {
            count: 201910151296,
            down: 60 * 1000
          }
        },
        {
          logo: require('../../assets/images/tickets/jsctssc.png'),
          name: '时速时时彩',
          type: '2',
          nums: ['1', '3', '4', '6', '20'],
          nper: {
            count: 201910151296,
            down: 60 * 1000
          }
        },
        {
          logo: require('../../assets/images/tickets/ctgxk3.png'),
          name: '广东快3',
          type: '1',
          nums: ['1', '1', '5'],
          nper: {
            count: 201910151296,
            down: 60 * 1000
          }
        },
        {
          logo: require('../../assets/images/tickets/cthebk3.png'),
          name: '香港快3',
          type: '1',
          nums: ['6', '6', '6'],
          nper: {
            count: 201910151296,
            down: 60 * 1000
          }
        }
      ]
    };
  },
  methods: {},
  created() {}
};
</script>
<style lang="less" rel="stylesheet/less" scoped>

  .lobby{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
  }

  .ruok-header{
    height: 40px;
    background: -webkit-linear-gradient(45deg,#9067ff,#ff78d2);
    position: relative;
    width: 100%;

    .header-title{
      line-height: 40px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      letter-spacing: 1px;
      padding: 0 40px;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .tab .van-tabs__line{
    background-color: #697bff;
  }
</style>
